<template>
  <div class="screen-wrapper">
    <div class="screen" ref="screen">
      <div class="screen_top">
        <div class="screen_top_head">
          <div class="screen_top_head__lf">
            <span class="screen_top_head__lf__home" @click="goHome">首页</span>
          </div>
          <div class="screen_top_head__center">
            <div class="screen_top_head__center__title">
              智慧旅游可视化大数据平台
            </div>
          </div>
          <div class="screen_top_head__rt">
            <span class="screen_top_head__rt__count">统计报告</span>
            <span class="screen_top_head__rt__datetime">
              当前时间{{ datetime }}
            </span>
          </div>
        </div>
      </div>
      <div class="screen_main">
        <div class="screen_main_lf">
          <div class="screen_main_lf__yk">
            <div class="screen_main_lf__yk__top">
              <p class="screen_main_lf__yk__top__title">实时游客统计</p>
              <p class="screen_main_lf__yk__top__block"></p>
              <p class="screen_main_lf__yk__top__num">
                可预约总量
                <span>999999</span>
                人
              </p>
              <div class="screen_main_lf__yk__number">
                <span v-for="(item, index) in people" :key="index">
                  {{ item }}
                </span>
              </div>
              <div class="screen_main_lf__yk__echart" ref="liquidfill">123</div>
            </div>
          </div>
          <div class="screen_main_lf__sex">
            <div class="screen_main_lf__sex__top">
              <p class="screen_main_lf__sex__top__title">男女比例</p>
              <p class="screen_main_lf__sex__top__block"></p>
            </div>
            <div class="screen_main_lf__sex__main">
              <div class="screen_main_lf__sex__main__man">
                <img src="../../views/screen/images/man.png" alt="" />
              </div>
              <div class="screen_main_lf__sex__main__women">
                <img src="../../views/screen/images/woman.png" alt="" />
              </div>
            </div>
            <div class="screen_main_lf__sex__rate">
              <p>男士58%</p>
              <p>女士42%</p>
            </div>
            <div class="screen_main_lf__sex__echart" ref="rate"></div>
          </div>
          <div class="screen_main_lf__age">
            <div class="screen_main_lf__age__top">
              <p class="screen_main_lf__age__top__title">年龄比例</p>
              <p class="screen_main_lf__age__top__block"></p>
            </div>
            <div class="screen_main_lf__age__echart" ref="agePite"></div>
          </div>
        </div>
        <div class="screen_main_center">
          <div class="screen_main_center__map" ref="map"></div>
          <div class="screen_main_center__line">
            <div class="screen_main_center__line__top">
              <p class="screen_main_center__line__top__title">
                未来7天游客量趋势图
              </p>
              <p class="screen_main_center__line__top__block"></p>
            </div>
            <div class="screen_main_center__line__echart" ref="ykl"></div>
          </div>
        </div>
        <div class="screen_main_rt">3</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import mapJson from './chinaMap.json'
import '@/styles/screen/index.less'

onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
  timer.value = setInterval(() => {
    datetime.value = moment().format('YYYY年MM月DD日 hh:mm:ss')
  }, 1000)
  mapJson.features = mapJson.features.filter((o: any) => o.properties.centroid)
  liquidfillInit()
  rateInit()
  piteInit()
  mapInit()
  yklInit()
})

const screen = ref()
const router = useRouter()
const liquidfill = ref()
const rate = ref()
const agePite = ref()
const map = ref()
const ykl = ref()
let datetime = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'))
let timer = ref(0)
let people = ref('216908人')
const value = ref(0.6)

const getScale = (w = 1920, h = 1080) => {
  const width = window.innerWidth / w
  const height = window.innerHeight / h
  return width < height ? width : height
}

const goHome = () => {
  router.push({ name: 'Home' })
}

// 水球图
const liquidfillInit = () => {
  let echart = echarts.init(liquidfill.value)
  echart.setOption({
    title: [
      {
        text: '60%',
        top: '49%',
        left: '41%',
        textStyle: {
          fontSize: '40',
          fontWeight: '500',
          color: '#fff'
        }
      }
    ],
    series: [
      {
        type: 'gauge',
        radius: '80%',
        startAngle: 0,
        endAngle: 360,
        axisLine: {
          show: false
        },
        axisTick: {
          distance: -6,
          length: 2,
          lineStyle: {
            color: '#2AECFF',
            width: 5,
            type: [20],
            dashOffset: 19,
            opacity: 0.8
          },
          splitNumber: 6
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        }
      },
      {
        type: 'liquidFill',
        radius: '68%',
        z: 5,
        center: ['50%', '50%'],
        amplitude: 14,
        backgroundStyle: {
          color: '#0d2d42'
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: '#0061A2'
              },
              {
                offset: 0,
                color: '#00FFE5'
              }
            ],
            globalCoord: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: '#0061A2'
              },
              {
                offset: 0,
                color: '#00FFE5'
              }
            ],
            globalCoord: false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: '#0061A2'
              },
              {
                offset: 0,
                color: '#00FFE5'
              }
            ],
            globalCoord: false
          }
        ],
        data: [
          value.value + 0.02,
          {
            value: value.value - 0.01,
            direction: 'left'
          },
          value.value - 0.01
        ],
        label: {
          normal: {
            formatter: ''
          }
        },
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#2AECFF'
          }
        }
      }
    ],
    outline: {
      show: true,
      borderDistance: 0,
      itemStyle: {
        borderWidth: 2,
        borderColor: '#2AECFF'
      }
    }
  })
}

// 比例图
const rateInit = () => {
  let echart = echarts.init(rate.value)
  echart.setOption({
    legend: {},
    xAxis: {
      show: false,
      min: 0,
      max: 100
    },
    yAxis: {
      show: false,
      type: 'category'
    },
    series: [
      {
        type: 'bar',
        data: [58],
        barWidth: 20,
        z: 100,
        itemStyle: {
          borderRadius: 20
        }
      },
      {
        type: 'bar',
        data: [100],
        barWidth: 20,
        barGap: '-100%',
        itemStyle: {
          color: '#ff4b7a',
          borderRadius: 20
        }
      }
    ]
  })
}

// 饼图
const piteInit = () => {
  let echart = echarts.init(agePite.value)
  echart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '12%',
      right: 20,
      orient: 'vertical',
      textStyle: {
        color: 'white',
        fontSize: 14
      }
    },
    series: [
      {
        name: '年龄比例',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: -5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: true,
          position: 'inside',
          color: 'white'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '10岁以下' },
          { value: 735, name: '10-18岁' },
          { value: 1380, name: '18-30岁' },
          { value: 884, name: '30-40岁' },
          { value: 534, name: '40-60岁' },
          { value: 820, name: '60岁以上' }
        ]
      }
    ],
    grid: {
      left: 0,
      top: 0
    }
  })
}

// 地图
const mapInit = () => {
  echarts.registerMap('china', mapJson as any)
  let echart = echarts.init(map.value)
  echart.setOption({
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        show: true,
        color: '#fff'
      },
      itemStyle: {
        areaColor: 'skyblue'
      },
      emphasis: {
        label: {
          color: '#fff',
          fontSize: 14
        },
        itemStyle: {
          areaColor: '#5470c6'
        }
      }
    },
    series: [
      {
        type: 'lines',
        polyline: true,
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [120.901349, 31.017327] // 终点
            ]
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [85.294711, 41.371801] // 终点
            ]
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [112.982279, 28.19409] // 终点
            ]
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [88.388277, 31.56375] // 终点
            ]
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [104.065735, 30.659462] // 终点
            ]
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [126.642464, 45.756967] // 终点
            ]
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [102.712251, 25.040609] // 终点
            ]
          }
        ],
        // 统一的样式设置
        lineStyle: {
          width: 1
        },
        colorBy: 'series',
        effect: {
          show: true,
          loop: true,
          trailLength: 0.02,
          symbol: 'arrow',
          symbolSize: 5
        }
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        symbolSize: 10,
        rippleEffect: {
          // 坐标点动画
          period: 3,
          scale: 2,
          brushType: 'fill'
        },
        data: mapJson.features.map((item: any) => {
          return {
            name: item.properties.name,
            value: [item.properties.centroid[0], item.properties.centroid[1], 1]
          }
        }),
        label: {
          show: false // 不显示标点上的标签，避免重叠
        },
        itemStyle: {
          normal: {
            color: 'yellow',
            shadowBlur: 10,
            shadowColor: 'yellow'
          }
        },
        zlevel: 1
      }
    ]
  })
}

// 游客量趋势图
const yklInit = () => {
  let echart = echarts.init(ykl.value)
  echart.setOption({
    title: {
      text: '访问量'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      splitLine: {
        show: false
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      // 不显示分割线
      splitLine: {
        show: false
      },
      // 轴线
      axisLine: {
        show: true
      },
      // 刻度
      axisTick: {
        show: true
      }
    },
    grid: {
      left: 40,
      top: 40,
      right: 40,
      bottom: 40
    },
    series: [
      {
        type: 'line',
        data: [120, 213, 99, 68, 369, 680, 368],
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'red' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'blue' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  })
}

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped></style>
